<template>
	<view class="container" :style="[ctop()]">
		<view :style="[top()]" class="top fixed">
			<view class="flex j-between a-center">
				<view class="flex a-center rule" @tap="back()">
					<u-icon name="arrow-left" size="40"></u-icon>
				</view>
				<view class="title ecllipse flex j-center">
					<view>我的发布</view>
				</view>
				<view class="flex j-end a-center place rule" v-if="current === 0 || current === 3">
					<view>取消任务</view>
				</view>
				<view class="flex j-end a-center place rule" v-if="current === 1 || current === 2" @tap="goto('/pages/task-detail')">
					<view>任务详情</view>
				</view>
			</view>
		</view>
		<view class="menus">
			<u-tabs :font-size="32" :list="menus" bg-color="transparent" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view>
			<task-item v-for="(item,i) in jx_task" :key="i" :item="item"></task-item>
		</view>
	</view>
</template>

<script>
import taskItem from './components/manage-item.vue'
export default {
	components:{taskItem},
	data() {
		return {
			menus:[{name:'待审核'},{name:'已完成'},{name:'未通过'},{name:'仲裁单'}],
			current:0,
			jx_task:[
				{status:1,time:'2021-12-21 12:00',name:'用户名A',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{status:2,time:'2021-12-21 12:00',name:'用户名B',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{status:3,time:'2021-12-21 12:00',name:'用户名C',src:'https://cdn.uviewui.com/uview/common/logo.png'},
				{status:4,time:'2021-12-21 12:00',name:'用户名D',src:'https://cdn.uviewui.com/uview/common/logo.png'}
			]
		}
	},
	methods: {
		top(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+10)+'px'}
		},
		ctop(){
			let pdt = 0
			uni.getSystemInfo({  
		        success:function(e){  
		            // #ifndef MP  
		            if(e.platform == 'android') {  
		                pdt = e.statusBarHeight  
		            }else {  
		                pdt = e.statusBarHeight + 45  
		            }  
		            // #endif  
		
		            // #ifdef MP-WEIXIN  
		            let custom = wx.getMenuButtonBoundingClientRect()  
		            pdt = custom.bottom + custom.top - e.statusBarHeight  
		            // #endif  
		
		            // #ifdef MP-ALIPAY  
		            pdt = e.statusBarHeight + e.titleBarHeight  
		            // #endif  
		        }  
		    })  
			return {paddingTop:(pdt+44)+'px'}
		},
		change(i){
			this.current = i
		},
	}
}
</script>

<style lang="scss" scoped>
.container{padding: 0 24rpx;}
.top{padding: 18rpx 24rpx;width: 100%;left:0;right: 0;top:0;z-index: 10;color: #333;
	.title{font-weight: bold;font-size: 36rpx;width: 400rpx;}
	.rule{font-size: 32rpx;width: 32%;}
	.msg{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
}
.menus{margin-bottom: 32rpx;}
</style>
